import styled, { css } from "styled-components";
import {
    TStyledHeadProps,
    TStyledTableProps,
    TRProps,
    TStyledTHProps,
    TStyledDProps,
    TStyledBodyProps
} from "./Table.types";

/**
 * Styled компонент для тега <table>.
 * 
 * @property { TStyledTableProps } props - Свойства компонента StyledTable.
 */
export const StyledTable = styled.table<TStyledTableProps>`

    border-collapse: collapse;

    .checkbox {
        width: 5%;
        text-indent: 0.5rem;
    }

    .id {
        width: 5%;
    }

    .actions {
        width: 10%;
    }
`;

/**
 * Styled компонент для тега <thead>.
 * 
 * @property { THeadProps } props - Свойства компонента StyledTHead.
 */
export const StyledTHead = styled.thead<TStyledHeadProps>``;

/**
 * Styled компонент для тега <tr>.
 * 
 * @property { TRProps } props - Свойства компонента StyledTR.
 */
export const StyledTR = styled.tr<TRProps>`
    background-color: ${props => props.isDark && '#E2E2E2'};
    background-color: ${props => props.isChecked && '#7BB4E3'}; 

    ${props => props.disabled && css`
        color: #eaeaea;  
        td {
            border-color: black;
        }
    `}
`;

/**
 * Styled компонент для тега <th>.
 * 
 * @property { THProps } props - Свойства компонента StyledTH.
 */
export const StyledTH = styled.th<TStyledTHProps>`
    background-color: Gray;
    border: 1px solid;
    padding: 0.2rem;
`;

/**
 * Styled компонент для тега <td>.
 * 
 * @property { TDProps } props - Свойства комопнента StyledTD.
 */
export const StyledTD = styled.td<TStyledDProps>`
    border: 1px solid;
    padding: 0.2rem;
    box-sizing: border-box;
    text-align: center;
`;

/**
 * Styled компонент для тега <tbody>.
 * 
 * @property { TBodyProps } props -Свойства компонента StyledTBody.
 */
export const StyledTBody = styled.tbody<TStyledBodyProps>``;